<template>
  <div class="tile-container no-background-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col>
          <el-card>
            <template #header>
              <el-tag effect="dark" size="large">导航</el-tag>
            </template>

            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="8" v-for="item of navigateBtnList.slice(0,3)">
                <div class="function-btn" @click="()=>navigateTo(item.link)">
                  <img :src="item.img" alt="" class="btn-img">
                  <div class="function-description">
                      <div class="main-desc">{{ item.mainDesc }}</div>
                      <div class="sub-desc">{{ item.subDesc }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 30px; margin-bottom: 50px;">
              <el-col :span="8" v-for="item of navigateBtnList.slice(3,6)">
                <div class="function-btn" @click="()=>navigateTo(item.link)">
                  <img :src="item.img" alt="" class="btn-img">
                  <div class="function-description">
                      <div class="main-desc">{{ item.mainDesc }}</div>
                      <div class="sub-desc">{{ item.subDesc }}</div>
                  </div>
                </div>
              </el-col>

            </el-row>
          </el-card>
        </el-col>
        <el-col>
          <el-card style="padding-bottom: 120px;">
            <template #header>
              <el-tag effect="dark" size="large">常用模板</el-tag>
            </template>
            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="8" v-for="item of commonTemplate.slice(0,3)">
                <div class="function-btn" @click="()=>navigateTo(item.link)">
                  <img :src="item.img" alt="" class="btn-img">
                  <div class="function-description">
                      <div class="main-desc">{{ item.mainDesc }}</div>
                      <div class="sub-desc">{{ item.subDesc }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 30px; margin-bottom: 50px;">
              <el-col :span="8" v-for="item of commonTemplate.slice(3,6)">
                <div class="function-btn" @click="()=>navigateTo(item.link)">
                  <img :src="item.img" alt="" class="btn-img">
                  <div class="function-description">
                      <div class="main-desc">{{ item.mainDesc }}</div>
                      <div class="sub-desc">{{ item.subDesc }}</div>
                  </div>
                </div>
              </el-col>

            </el-row>
          </el-card>
        </el-col>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <el-tag effect="dark" size="large">系统简介</el-tag>
          </template>
          <div style="height: 650px;overflow: hidden;text-overflow: ellipsis;display: block;font-size: 18px;" v-html="homeData">
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-col :span="24">
          <el-card class="announcement-card">
            <template #header>
              <el-tag effect="dark" size="large">公告</el-tag>
            </template>
            <div class="announcement-list">
              <div v-for="item in announcementListArr" :key="item.id" class="announcement-item">
                <div class="announcement-time">名称：{{ item.noticeName }}</div>
                <div class="announcement-content">内容：{{ item.noticeContent }}</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="24">
          <el-card class="announcement-card">
            <template #header>
              <el-tag effect="dark" type="danger" size="large">预警</el-tag>
            </template>
            <div class="announcement-list">
              <div v-for="item in warningList.slice(0,3)" :key="item.id" class="announcement-item">
                <div class="announcement-time">名称：{{ item.remindName }}</div>
                <div class="announcement-content">内容：{{ item.remindContent }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import companyInfoImg from '/@/assets/home_images/company-info-icon.png'
import traningImg from '/@/assets/home_images/training-icon.png'
import examImg from '/@/assets/home_images/exam-ifno-icon.png'
import archivalInfoImg from '/@/assets/home_images/archival-info-icon.png'
import detectInfoImg from '/@/assets/home_images/detect-info.png'
import serviceInfoImg from '/@/assets/home_images/service-info-icon.png'
import ruleImg from '/@/assets/home_images/rules-icon.png'
import functionImg from '/@/assets/home_images/functon-icon.png'
import kitchenTagImg from '/@/assets/home_images/kitechen-tag-icon.png'
import SOPImg from '/@/assets/home_images/sop-icon.png'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import RemindInfoApi from '../api/RemindInfoApi'
import CompanyInfoNoticeApi from '../api/CompanyInfoNoticeApi'
import CommonApi from '~/src/api/CommonApi'

defineOptions({
  name: "DataScreen",
  title: "首页",
});


const homeData = ref("")
const announcementListArr = ref([]);
const warningList = ref([])
const navigateBtnList = [
  {
    img: companyInfoImg,
    mainDesc: "企业制度",
    subDesc: "企业制度信息入口",
    link: "/company/manage/company/manage/company-institutional"
  },
  {
    img: traningImg,
    mainDesc: "培训信息",
    subDesc: "培训信息咨询入口",
    link: "/training/training/training/training/training/index"
  },
  {
    img: examImg,
    mainDesc: "考试信息",
    subDesc: "考试信息咨询入口",
    link: "/training/training/exam/training/training/exam_index"
  },
  {
    img: archivalInfoImg,
    mainDesc: "档案信息",
    subDesc: "个人档案咨询入口",
    link: "/company/user-management/staffInfo"
  },
  {
    img: detectInfoImg,
    mainDesc: "检测信息",
    subDesc: "测试信息咨询入口",
    link: "/inspect_info/check_info_list"
  },
  {
    img: serviceInfoImg,
    mainDesc: "库存信息",
    subDesc: "库存信息入口",
    link: "/company/manage/store/store_detail"
  },
]

const commonTemplate = [
  {
    img: ruleImg,
    mainDesc: "制度模板",
    subDesc: "系统制度模板",
    link: "/company/kitchen_info/label"
  },
  {
    img: functionImg,
    mainDesc: "功能区标签",
    subDesc: "现场功能区模板",
    link: "/company/kitchen_info/label"
  },
  {
    img: kitchenTagImg,
    mainDesc: "后厨标签",
    subDesc: "现场后厨标签",
    link: "/company/kitchen_info/label"
  },
  {
    img: SOPImg,
    mainDesc: "SOP分类",
    subDesc: "现场SOP分类模板",
    link: "/company/kitchen_info/label"
  },
]

const router = useRouter()
function navigateTo(link:string){
  router.push(link)
}
// 获取公告列表
const fetchAnnouncementList = async () => {
  try {
    const data = { _current: 1, _size: 10 };
    const res = await CompanyInfoNoticeApi.getPageData(data)
    announcementListArr.value = res.data.records;
  } catch (error) {
    console.error("获取公告列表失败:", error);
    ElMessage.error('获取公告列表失败');
  }
};
// 获取预警信息列表
const fetchWarningList = async () => {
  try {
    const data = { _current: 1, _size: 10 };
    const res = await RemindInfoApi.getPageData(data) 
    warningList.value = res.data.records;
  } catch (error) {
    console.error("获取预警列表失败:", error);
    ElMessage.error('获取预警列表失败');
  }
};
onMounted(async () => {
  try{
    homeData.value = (await CommonApi.getSysAgreement({type: "storeRegister"})).data.detail
    console.log("homeData",homeData.value)
  }catch(error){
    console.error("获取系统简介失败:", error);
    ElMessage.error('获取系统简介失败');
  }
  fetchAnnouncementList();
  fetchWarningList();
});
</script>

<style lang="scss" scoped>
.function-btn {
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.function-description {}

.btn-img {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin-right: 5px;
  background-color: rgba(145, 192, 230, 0.3);
  -webkit-user-drag: none;
}

.main-desc {
  font-size: 18px;
}

.sub-desc {
  font-size: 10px;
  color: gray;
  margin-top: 5px;
}


.announcement-card {
  height: 370px;
}

.tile-title {
  font-weight: bold;
  font-size: 16px;
  color: #1d2129;
  line-height: 24px;
}

.link-title {
  font-weight: 400;
  font-size: 14px;
  color: #1d2129;
  line-height: 36px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.announcement-list {
  padding: 10px;
  height: 280px;
  overflow: scroll;
}

.announcement-item {
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;

  &:last-child {
    border-bottom: none;
  }
}

.announcement-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.announcement-content {
  font-size: 14px;
  line-height: 1.5;
}
</style>
